<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import {
    addServiceCategory,
    updateServiceCategory,
    getParentCategories,
  } from '@/api-new/service-category';
  import { computed, ref } from 'vue';

  // 表单配置
  const editForm = useForm({
    state: {
      categoryId: '',
      categoryLevel: undefined as number | undefined,
      parentCategoryId: '',
      categoryName: '',
    },
    rules: {
      categoryLevel: {
        required: true,
        message: '请选择分类级别',
      },
      categoryName: {
        required: true,
        message: '请输入分类名称',
      },
      parentCategoryId: {
        validator: (value: any, cb: any) => {
          // 如果是二级或三级分类,需要选择上级分类
          if (
            editForm.state.categoryLevel &&
            editForm.state.categoryLevel > 1
          ) {
            if (!value) {
              cb('请选择上级分类');
              return;
            }
          }
          cb();
        },
      },
    },
  });

  // 分类级别选项
  const levelOptions = [
    { label: '一级分类', value: 1 },
    { label: '二级分类', value: 2 },
    { label: '三级分类', value: 3 },
  ];

  // 上级分类选项
  const parentCategoryOption = useSelectOption({
    name: '上级分类',
    apiFun: getParentCategories,
    immediate: false,
    fieldNames: {
      value: 'categoryId',
      label: 'categoryName',
    },
  });

  // 判断是否需要显示上级分类字段
  const showParentCategory = computed(() => {
    return editForm.state.categoryLevel && editForm.state.categoryLevel > 1;
  });

  // 监听分类级别变化，清空上级分类
  const onLevelChange = () => {
    editForm.state.parentCategoryId = '';
    // 如果选择了非一级分类，加载上级分类列表
    if (showParentCategory.value) {
      parentCategoryOption.executeQuery();
    }
  };

  // 弹窗配置
  const editModal = useModeModalBinder({
    modes: ['edit', 'add'] as const,
    renderTitle(mode) {
      if (mode === 'add') {
        return '新增服务分类';
      }
      return '编辑服务分类';
    },
    onShow(mode, data) {
      if (mode === 'add') {
        editForm.resetFields();
      } else {
        editForm.setFieldsValue({
          categoryId: data.categoryId,
          categoryLevel: data.categoryLevel,
          parentCategoryId: data.parentCategoryId || '',
          categoryName: data.categoryName,
        });
        // 如果是编辑模式且有上级分类，加载上级分类列表
        if (data.categoryLevel > 1) {
          parentCategoryOption.executeQuery();
        }
      }
    },
    async onOkClick(mode) {
      // 先验证表单
      await editForm.validate();

      const data = {
        categoryLevel: editForm.state.categoryLevel,
        parentCategoryId: showParentCategory.value
          ? editForm.state.parentCategoryId
          : undefined,
        categoryName: editForm.state.categoryName,
      };

      if (mode === 'add') {
        return addServiceCategory(data);
      }

      return updateServiceCategory({
        ...data,
        categoryId: editForm.state.categoryId,
      });
    },
  });
</script>

<template>
  <a-modal v-bind="editModal.bindProps" width="600px">
    <a-form v-bind="editForm.bindProps" layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-form-item field="categoryLevel" label="分类级别">
            <a-select
              v-model="editForm.state.categoryLevel"
              placeholder="请选择分类级别"
              @change="onLevelChange"
            >
              <a-option
                v-for="item in levelOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </a-select>
          </a-form-item>
        </a-col>

        <a-col v-if="showParentCategory" :span="24">
          <a-form-item field="parentCategoryId" label="上级分类">
            <a-select
              v-model="editForm.state.parentCategoryId"
              allow-clear
              v-bind="parentCategoryOption.bindProps"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="categoryName" label="分类名称">
            <a-input
              v-model="editForm.state.categoryName"
              placeholder="请输入分类名称"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
